// tab栏
var categorys_items = document.querySelectorAll('.categorys-items');
var categorys_items_layer = document.querySelectorAll('.categorys-items-layer');
// 排他
function page() {
    for (var i = 0; i < categorys_items_layer.length; i++) {
        categorys_items_layer[i].className = 'categorys-items-layer';
    }
};
for (var j = 0; j < categorys_items_layer.length; j++) {
    categorys_items[j].index = j;
    categorys_items[j].onmouseover = function() {
        page();
        categorys_items_layer[this.index].className = 'categorys-items-layer show';
    }
    categorys_items[j].onmouseout = function() {
        page();
    }
};
// 扩展栏
var multiple = 1;
$('.s-l-multiple').click(function() {
    if (multiple == 1) {
        $('.wrap_brand').css('display', 'none');
        $('.all_a_z').css('display', 'block');
        $('.zimu_list').css('display', 'block');
        $('.enter_yes_no').css('display', 'block');
        multiple = 2;
    } else if (multiple == 2) {
        $('.wrap_brand').css('display', 'block');
        $('.all_a_z').css('display', 'none');
        $('.zimu_list').css('display', 'none');
        $('.enter_yes_no').css('display', 'none');
        multiple = 1;
    }
});
$('.is_no label input').change(function() {
    if ($('.is_no label input:checked').length >= 1) {
        $('.yes_bt').css('display', 'block');
    } else {
        $('.yes_bt').css('display', 'none');
    }
});
$('.no_bt').click(function() {
    $('.wrap_brand').css('display', 'block');
    $('.all_a_z').css('display', 'none');
    $('.zimu_list').css('display', 'none');
    $('.enter_yes_no').css('display', 'none');
    multiple = 1;
});
$('.all_a_z ul li').mouseover(function() {
    $(this).addClass('all_brand curr').siblings().removeClass('all_brand curr')
});
// 商品渲染
function ajaxfun(data) {
    for (var z = 0; z < data.length; z++) {
        var arrstring = '';
        var minstring = '';
        for (var y = 0; y < data[z].good_urls.length; y++) {
            arrstring += `
            <li>
                <img src="${data[z].good_urls[y]}" alt="" width="26" height="26">
            </li>
            `;
        };
        var mainp = `
            <div class="gl-i-wrap">
                <div class="p-img">
                    <a href="">
                        <img src='${data[z].good_urls[0]}' alt="">
                    </a>
                </div>
                <div class="sider">
                    <ul>
                       ${arrstring}
                    </ul>
                </div>
                <div class="p-lie">
                    <div class="p-price">¥${data[z].goods_price}</div>
                    <div class="p-num">已售<em>${data[z].sales_volume}</em>件</div>
                </div>
                <div class="p-name">
                    <a href="">${data[z].goods_title}</a>
                </div>
                <div class="p-store">
                    <a href="javascript:;" class="store">商创自营</a>
                    <a href="" class="p-kefu p-c-violet">
                        <i class="iconfont icon-kefu"></i>
                    </a>
                </div>
                <div class="label_list"></div>
                <div class="p-operate">
                    <a href="javascript:;">
                        <label>
                            <input type="checkbox" name="duibi" id="" value="对比">
                            <span>对比</span>
                        </label>
                    </a>
                    <a href="javascript:;" class="choose-btn-coll">
                        <i class="iconfont icon-aixin"></i>收藏
                    </a>
                    <a href="javascript:;" class="addcart">
                        <i class="iconfont icon-gouwuchekong"></i> 加入购物车
                    </a>
                </div>
            </div>
        `;
        var minimgx = `
        <div class="gl-i-wrap">
            <div class="col col-1">
                <div class="p-img">
                    <a href="">
                        <img src="${data[z].good_urls[0]}" alt="">
                    </a>
                </div>
                <div class="p-right">
                    <div class="p-name">
                        <a href="">
                        ${data[z].goods_title}
                        </a>
                    </div>
                    <div class="p-lie">
                        <div class="p-num">销量: ${data[z].sales_volume}</div>
                        <div class="p-comm">评价: 0</div>
                    </div>
                </div>
            </div>
            <div class="col col-2">
                <div class="p-store">
                    <a href="javascript:;" class="store">商创自营</a>
                    <a href="" class="p-kefu">
                        <i class="iconfont icon-kefu"></i>
                    </a>
                </div>
            </div>
            <div class="col col-3">
                <div class="p-price">
                    <div class="shop-price">¥${data[z].goods_price}</div>
                    <div class="original-price">¥${data[z].goodsz_price}</div>
                </div>
            </div>
            <div class="col col-4">
                <div class="p-operate">
                    <a href="javascript:;">
                        <label>
                            <input type="checkbox" name="duibi" id="" value="对比">
                            <span>对比</span>
                        </label>
                    </a>
                    <a href="javascript:;" class="choose-btn-coll">
                        <i class="iconfont icon-aixin"></i>收藏
                    </a>
                    <a href="javascript:;" class="addcart">
                        <i class="iconfont icon-gouwuchekong"></i> 加入购物车
                    </a>
                </div>
            </div>
        </div>
        `;
        $('.goods-list-warp ul .gl-item').eq(z).html(mainp);
        $('.items .gl-h-item').eq(z).html(minimgx);
        arrstring = '';
    };
    // hover图片切换
    $('.sider ul li').hover(function() {
        $(this).parents().eq(2).children().eq(0).find('img')[0].src = $(this).children().eq(0)[0].src;
    });


    // 多选对比
    $('input[type="checkbox"][value="对比"]').change(function() {
        $('.duibi_box').css('display', 'block');
        var indexck = $('input[type="checkbox"][value="对比"]:checked');
        var textvla = '';
        if (indexck.length <= 4) {
            for (var i = 0; i < indexck.length; i++) {
                indexck.eq(i).addClass('duibi' + i);
                textvla = `
            <dt>
                <a href="">
                    <img src="${indexck.eq(i).parents().eq(3).find('.p-img a img')[0].src}" alt="" width="60" height="60">
                </a>
            </dt>
            <dd>
                <a target="_blank" class="diff-item-name" href="">
                        ${indexck.eq(i).parents().eq(3).find('.p-name a').text()}
                </a>
                <div class="p-org">
                        <span class="p-price">${indexck.eq(i).parents().eq(3).find('.p-lie .p-price').text()}</span>
                    <a class="del-comp-item">删除</a>
                </div>
            </dd>
            `;
                $('.diff-items dl').eq(i).html(textvla);
                $('.diff-items dl').eq(i).addClass('duibi' + i);
                // 删除
                $('.del-comp-item').click(function() {
                    var classname = $(this).parents().eq(2).attr('class');
                    for (var k = 0; k < indexck.length; k++) {
                        if (indexck.eq(k).attr('class') == classname) {
                            $(this).parents().eq(2).removeClass(classname);
                            indexck.eq(k).prop('checked', false);
                            indexck.eq(k).removeClass(classname);
                        };
                    };
                    var remov = `
            <dt>
                <h1>${Number($(this).parents().eq(2).index())+1}</h1>
            </dt>
            <dd>
                <span class="ts">您还可以继续添加</span>
            </dd>`;
                    $(this).parents().eq(2).html(remov);
                });
            };
        } else {
            alert('不能超过4个哦');
        };
    });

    // 隐藏

    $('.hide-me').click(function() {
        $('.duibi_box').css('display', 'none');
    });

    // 收藏

    var numcs = 1;
    $('.choose-btn-coll').click(function() {
        if (numcs == 1) {
            $(this).addClass('choose-btn-coll  selected');
            numcs = 2;
            alert('已收藏');
        } else if (numcs == 2) {
            $(this).removeClass('choose-btn-coll  selected');
            $(this).addClass('choose-btn-coll');
            numcs = 1;
        }
    });

}
$.get('../mock/gehu.json', {}, function(data) {
    console.log(data[0].gehu[0]);
    // 所有图片链接 下标
    console.log(data[0].gehu[0][0].good_urls);
    console.log(data[0].gehu[0][1].good_urls);
    // 价钱
    console.log(data[0].gehu[0][0].goods_price);
    console.log(data[0].gehu[0][1].goods_price);
    // 商品介绍
    console.log(data[0].gehu[0][0].goods_title);
    console.log(data[0].gehu[0][1].goods_title);
    // 已售
    console.log(data[0].gehu[0][0].sales_volume);
    console.log(data[0].gehu[0][1].sales_volume);
    console.log(data[0].gehu[0]);
    ajaxfun(data[0].gehu[0]);




});


// 大图小图切换
$('.maximg').click(function() {
    $(this).parent().addClass('item current');
    $('.minimg').parent().removeClass('item current').addClass('item');
    $('.gl-warp-large').css('display', 'block');
    $('.gl-warp-samll').css('display', 'none');
});
$('.minimg').click(function() {
    $(this).parent().addClass('item current');
    $('.maximg').parent().removeClass('item current').addClass('item');
    $('.gl-warp-large').css('display', 'none');
    $('.gl-warp-samll').css('display', 'block');
});


// 右侧推广
var num = 1;
$('.g-stop').click(function() {
    if (num == 1) {
        $('.goods-spread').css('width', 0);
        $('.goods-spread').css('margin-left', 20);
        $('.goods-list-warp').css('width', 1392);
        $('.gs-warp').css('display', 'none');
        num = 2;
    } else if (num == 2) {
        $('.goods-spread').css('width', 211);
        $('.goods-spread').css('margin-left', 0);
        $('.goods-list-warp').css('width', 1160);
        $('.gs-warp').css('display', 'block');
        num = 1;
    };
});
$('.filter-sort a').eq(0).click(function() {
    $('.filter-sort a').not(':eq(0)').removeClass('curr');
    $('.filter-sort a').eq(0).addClass('curr');
    $.getJSON('../mock/gehu.json', function(data) {
        var relDatasx = data[0].gehu[0];
        ajaxfun(relDatasx);
    });
});
// 判断是否是销量
$('.filter-sort a').eq(1).click(function() {
    $.getJSON('../mock/gehu.json', function(data) {
        console.log(data[0].gehu[0]);
        // 对数据进行排序
        console.log(data[0].gehu[0]);
        var relDatas = data[0].gehu[0];
        relDatas.sort(function(a, b) {
            return b.sales_volume - a.sales_volume
        });
        ajaxfun(relDatas);
    });
    $('.filter-sort a').not(':eq(1)').removeClass('curr');
    $('.filter-sort a').eq(1).addClass('curr');
});
// if (location.search == '?xiaoliang') {
// };
// 判断是否是新品
$('.filter-sort a').eq(2).click(function() {
    $('.filter-sort a').not(':eq(2)').removeClass('curr');
    $('.filter-sort a').eq(2).addClass('curr');
    $.getJSON('../mock/gehu.json', function(data) {
        var relDatasx = data[0].gehu[0];
        ajaxfun(relDatasx);
    });
});
// if (location.search == '?xinpin') {

// };
// 判断是否是评论数
$('.filter-sort a').eq(3).click(function() {
    $('.filter-sort a').not(':eq(3)').removeClass('curr');
    $('.filter-sort a').eq(3).addClass('curr');
    $.getJSON('../mock/gehu.json', function(data) {
        var relDatasx = data[0].gehu[0];
        ajaxfun(relDatasx);
    });
});
// if (location.search == '?pinglun') {
// };
// 判断是否是价格
$('.filter-sort a').eq(4).click(function() {
        $.getJSON('../mock/gehu.json', function(data) {
            var relDatasx = data[0].gehu[0];
            relDatasx.sort(function(a, b) {
                return a.goods_price - b.goods_price;
            });
            ajaxfun(relDatasx);
        });
        $('.filter-sort a').not(':eq(4)').removeClass('curr');
        $('.filter-sort a').eq(4).addClass('curr');
    })
    // if (location.search == '?jiage') {

// };